<!--author:王佳欣-->
<!DOCTYPE html>
<html>
<head>
    <title>修改个人信息</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="New Theme Forms template Responsive, Login form web template,Flat Pricing tables,Flat Drop downs  Sign up Web Templates, Flat Web Templates, Login sign up Responsive web template, SmartPhone Compatible web template, free WebDesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
    <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
    <!-- Custom Theme files -->
    <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
    <!-- //Custom Theme files -->
    <!-- web font -->
    <link href="//fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
    <!-- //web font -->
    <style>
        .button{
            font-size: 1em;
            color: #fff;
            background: transparent;
            border: 1px solid #fff;
            outline: none;
            cursor: pointer;
            padding: .6em 1em;
            -webkit-appearance: none;
            width: 100%;
            margin-top: 2em;
            transition: 0.5s all;
            -webkit-transition: 0.5s all;
            -moz-transition: 0.5s all;
            -o-transition: 0.5s all;
            -ms-transition: 0.5s all;
        }
        .button:hover {
            background: #FF9800;
            letter-spacing: 3px;
            color: #fff !important;
            border-color: #ff9800 !important;
        }
    </style>
</head>
<body>
<!-- main -->
<div class="main">
    <h1>修改个人信息</h1>
    <div class="main-w3lsrow" style="display: flex; justify-content: center">
        <!-- login form -->
        <!-- sign up form -->
        <div class="login-form login-form-left" >
            <div class="agile-row" >
                <div class="login-agileits-top" >
                    <form>
                        <p>用户名</p>
                        <!--							required表示必填项-->
                        <input type="text" id="username" name="username" required="">
                        <p>性别</p>
                        <div class="dxan">
                            <label class="radio-inline">
                                <input type="radio" name="gender" id="male" value="M"> 男
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="gender" id="female" value="F"> 女
                            </label>
                        </div>
                        <input type="button" onclick="updateInfo()" value="确认修改" class="button">
                    </form>
                </div>
            </div>
        </div>
        <div class="clear"> </div>
    </div>
</div>
<script type='text/javascript' src='js/jquery.min.js'></script>
<script type='text/javascript' src='js/plugins.js'></script>
<script type='text/javascript' src='js/script.js'></script>
<script type='text/javascript' src='js/particles.js'></script>
<script type='text/javascript' src='js/aos.js'></script>
<script type='text/javascript' src='js/prism.js'></script>
<script type='text/javascript' src='js/gravatar.js'></script>
<script type="text/javascript">
    var userId= localStorage.getItem("userId");
    getUser();
    // 展示用户名、性别
    let username = document.getElementById("username");
    function getUserDetail(){
        $.ajax({
            url:"http://192.168.47.129:8010/user/findUserById/"+userId,
            success:function (result){
                var name = result.data.username;
                var gender = result.data.gender;
                localStorage.setItem("gender",gender);
                if (isEmpty(name)){
                    username.value = "无";
                }else{
                    username.value = name;
                }
            }
        })
    }
    getUserDetail();
    let gender = localStorage.getItem("gender");
    if (gender == "M") {
        document.getElementById("male").setAttribute("checked", "checked");
    } else {
        document.getElementById("female").setAttribute("checked", "checked");
    }
    function updateInfo(){
        //判断选中了哪一个
        let checked = $("input[name='gender']:checked");
        let gender = checked.attr("value");
        let user={
            "id" : userId,
            "username" : $("#username").val(),
            "gender" :gender
        };
        if (isEmpty(user.username)){
            alert("更改的用户名不能为空！");
        }else{
            //成功后跳到用户详情页
            $.ajax({
                url:"http://192.168.47.129:8010/user/updateUserById",
                type:"post",
                contentType:"application/json;charset=utf-8",
                data:JSON.stringify(user),
                success: function (data) {
                    location.assign("userDetail.html");
                    //将用户名、性别存session中
                    localStorage.setItem("username", $("#username").val());
                    localStorage.setItem("gender", gender);
                },error: function() {
                    alert("something went wrong");
                }
            })
        }
    }
    function getUser(){
        if (userId==null){
            location.assign("login.html");
        }
    }
    function logout(){
        localStorage.clear();
    }

    function isEmpty(name) {
        if(name === '' || name.trim().length === 0){
            return true;
        }else{
            return false;
        }
    }
</script>
</body>
</html>